<template>
  <el-form :model="iotable" class="iotable-info" :rules="rules" ref="iotable">
    <div>
      <div class="iotable-head">
        <h3 class="iotable-head-text">进出登记表</h3>
      </div>
      <div class="iotable-title">
        <p class="iotable-title-text">进出登记</p>
      </div>
    </div>
    <!-- 修改个人信息 -->
    <div
      style="padding-left:5px; margin: 50px; margin-left: 150px; width: 600px;"
    >
      <el-form-item
        class="Info-change"
        prop="identity"
        label="是否外来人员"
        label-width="120px"
      >
        <el-radio-group v-model="iotable.identity">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="iostatus"
        label="进出情况"
        label-width="120px"
      >
        <el-radio-group v-model="iotable.iostatus">
          <el-radio label="进"></el-radio>
          <el-radio label="出"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="id"
        label="身份证号"
        label-width="120px"
      >
        <el-input
          v-model="iotable.id"
          placeholder="请输入身份证号"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="name"
        label="姓名"
        label-width="120px"
      >
        <el-input
          v-model="iotable.name"
          :disabled="isVisitor"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="age"
        label="年龄"
        label-width="120px"
      >
        <el-input
          v-model.number="iotable.age"
          placeholder="请输入年龄"
          :disabled="isVisitor"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="telephone"
        label="手机号"
        label-width="120px"
      >
        <el-input
          v-model="iotable.telephone"
          placeholder="请输入手机号码"
          :disabled="isVisitor"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="temperature"
        label="体温"
        label-width="120px"
      >
        <el-input
          v-model="iotable.temperature"
          placeholder="请输入体温"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="healthcode"
        label="健康码状况"
        label-width="120px"
      >
        <el-radio-group v-model="iotable.healthcode">
          <el-radio label="绿"></el-radio>
          <el-radio label="黄"></el-radio>
          <el-radio label="红"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="roomnumber"
        label="房间号"
        label-width="120px"
      >
        <el-input
          v-model="iotable.roomnumber"
          placeholder="请输入访问的房间号"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="corridornumber"
        label="楼栋号"
        label-width="120px"
      >
        <el-input
          v-model="iotable.corridornumber"
          placeholder="请输入访问的楼栋号"
        ></el-input>
      </el-form-item>

      <el-form-item
        class="Info-change"
        prop="ioreason"
        label="进出原因"
        label-width="120px"
      >
        <el-input
          v-model="iotable.ioreason"
          placeholder="请输入进出的原因"
        ></el-input>
      </el-form-item>

      <el-button
        style="margin-left: 200px;"
        type="primary"
        @click="onSubmited('iotable')"
        >修改</el-button
      >
      <el-button style="margin-left: 100px;" @click="onReset('iotable')"
        >清空</el-button
      >
    </div>
  </el-form>
</template>

<script>
export default {
  name: "IOTableSubmit",
  //返回新生成的组件相关数据
  data() {
    var checkIdentity = (rule, value, callback) => {
      if (this.iotable.identity == "是") {
        if (!value) {
          return callback(new Error("未填写"));
        }
        return callback();
      }
      return callback();
    };

    var checkAge = (rule, value, callback) => {
      if (this.iotable.identity == "是") {
        if (!value) {
          return callback(new Error("未填写"));
        }
        if (value <= 0 || value >= 120) return callback(new Error("年龄错误"));
        if (!/^[1-9]|[1-9]\d|1[0-1]\d$/.test(value))
          return callback(new Error("你输入的年龄格式错误"));
        return callback();
      }
      return callback();
    };

    var checkIDCardNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证不能为空"));
      }
      let aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外",
      };
      let iSum = 0;
      if (!/^\d{17}(\d|x)$/i.test(value)) {
        return callback(new Error("你输入的身份证长度或格式错误"));
      }
      value = value.replace(/x$/i, "a");
      if (aCity[parseInt(value.substr(0, 2))] == null) {
        return callback(new Error("你的身份证地区非法"));
      }
      let sBirthday =
        value.substr(6, 4) +
        "-" +
        Number(value.substr(10, 2)) +
        "-" +
        Number(value.substr(12, 2));
      let d = new Date(sBirthday.replace(/-/g, "/"));
      if (
        sBirthday !==
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
      ) {
        return callback(new Error("身份证上的出生日期非法"));
      }
      for (var i = 17; i >= 0; i--) {
        iSum += (Math.pow(2, i) % 11) * parseInt(value.charAt(17 - i), 11);
      }
      if (iSum % 11 !== 1) {
        return callback(new Error("你输入的身份证号非法"));
      }
      return callback();
    };
    return {
      iotable: {
        identity: "",
        iostatus: "",
        id: "",
        name: "",
        sex: "",
        age: "",
        telephone: "",
        temperature: "",
        healthcode: "",
        roomnumber: "",
        corridornumber: "",
        ioreason: "",
      },
      //定义表单验证的规则
      rules: {
        identity: [{ required: true, message: "请进行选择", trigger: "blur" }],
        iostatus: [{ required: true, message: "请进行选择", trigger: "blur" }],
        id: [
          {
            validator: checkIDCardNumber,
            trigger: ["blur"],
          },
        ],
        name: [
          { validator: checkIdentity, trigger: ["blur"] },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
          },
          {
            pattern: /^[\u4E00-\u9FA5]+$/,
            message: "用户名只能为中文",
          },
        ],
        age: [{ validator: checkAge, trigger: ["blur"] }],
        telephone: [
          { validator: checkIdentity, trigger: ["blur"] },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        temperature: [
          { required: true, message: "请输入体温", trigger: "blur" },
        ],
        healthcode: [
          { required: true, message: "请进行选择", trigger: "blur" },
        ],
        roomnumber: [
          { required: true, message: "请输入房间号", trigger: "blur" },
          {
            pattern: /^\d{3}$/,
            message: "房间号格式不正确",
            trigger: "blur",
          },
        ],
        corridornumber: [
          { required: true, message: "请输入楼栋号", trigger: "blur" },
          {
            pattern: /^\d|\d{2}$/,
            message: "楼栋号格式不正确",
            trigger: "blur",
          },
        ],
        ioreason: [
          { required: true, message: "请输入进出原因1", trigger: "blur" },
        ],
      },
    };
  },

  //前端测试路由拦截器，查看发送的请求正确与否
  /*mounted(){
  		this.axios.interceptors.request.use(config => {
  			console.log(config)
  			return config
  		},error =>{
  			return Promise.reject(error)
  		})
    },*/
  computed: {
    isVisitor() {
      if (this.iotable.identity == "是") return false;
      else return true;
    },
  },

  methods: {
    //修改信息事件
    onSubmited(info) {
      //判断输入的数据是否符合表单规则
      this.$refs[info].validate((valid) => {
        if (valid) {
          //将希望修改的数据传送到后端
          if(this.iotable.identity == "是")
            this.iotable.identity = 0;
          else
            this.iotable.identity = 1;
          if(this.iotable.iostatus == "进")
            this.iotable.iostatus = 0;
          else
            this.iotable.iostatus = 1;
          if(this.iotable.healthcode == "绿")
            this.iotable.healthcode = 0;
          else if(this.iotable.healthcode == "黄")
            this.iotable.healthcode = 1;
          else
            this.iotable.healthcode = 2;
          this.$axios
            .post("/api/iotable", this.iotable, {
              headers: { Authorization: "Bearer " + this.$store.state.token },
            })
            .then((response) => {
              console.log(response);
              if (response.data) {
                this.alertBox("修改成功");
              } else {
                this.alertBox("修改失败");
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error!");
        }
      });
    },
    //初始化输入表单
    onReset(info) {
      this.$refs[info].resetFields();
    },
  },
};
</script>

<style>
/* 这里是个人信息的相关css表 */
.iotable-info {
  padding-left: 10px;
}
/*定义了主体结构标题*/
.iotable-head {
  width: 1000px;
  height: 52px;
  border-bottom: 1px solid rgb(224, 224, 224);
}
/*定义了主体结构标题的文字格式*/
.iotable-head-text {
  width: 160px;
  height: 52px;
  line-height: 29px;
  color: rgba(112, 112, 112, 1);
  font-size: 28px;
  font-family: SourceHanSansSC-bold;
}
/*定义了主体结构副标题*/
.iotable-title {
  width: 1000px;
  height: 50px;
  line-height: 20px;
  padding-left: 15px;
  background-color: rgba(224, 224, 224, 1);
  border: 1px solid rgba(224, 224, 224, 1);
}
/*定义了主体结构副标题的文字格式*/
.iotable-title-text {
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  font-family: SourceHanSansSC-regular;
}
</style>
